<template>
	<view>
		<view class="main">
			<view class="flex-1">
				<view class="top-card">
					<image src="../../static/images/img_03.png" class="pic" mode="widthFix"></image>
					<view class="shade">
						<view class="fz">当前余额</view>
						<view class="price">2826.00</view>
						<navigator url="" hover-class="none" class="lk">
							<image src="../../static/images/icon_13.png" class="ico" mode="widthFix"></image> 充值记录
						</navigator>
					</view>
				</view>
				<view class="mod cz-sec">
					<view class="t-tit">选择充值金额</view>
					<view class="list">
						<view class="item" v-for="(item,index) in list" :key="index" @click="chooseBtn(index)"
							:class="item.checked?'checked':''">
							<view class="fz">
								<text>100</text>元
							</view>
							<view class="wz">
								送20元
							</view>
						</view>
					</view>
					<view class="input">
						<text>其他金额</text>
						<input type="decimal" class="ipt-txt" placeholder="请输入充值金额" />
					</view>
					<view class="tip">
						自定义充值及赠送金额: 充值50元以上赠送10元
					</view>
				</view>
				<view class="mod rule-sec">
					<view class="t-tit">详细规则</view>
					<view class="txt">
						<view class="fz">
							<image src="../../static/images/icon_14.png" class="ico" mode="widthFix"></image>
							<view class="flex-1">
								资金一旦充值到钱包余额中，就不能再提现，请用户谨慎操作
							</view>
						</view>
						<view class="fz">
							<image src="../../static/images/icon_14.png" class="ico" mode="widthFix"></image>
							<text class="flex-1">
								如果用户在充值过程中遇到任何问题或疑虑，请及时联系客服：400-800-8000
							</text>
						</view>
					</view>
				</view>
			</view>
			<button class="submit">立即充值</button>
			<view class="deal">
				<u-checkbox v-model="dealChecked" shape="circle" size="26" icon-size="16" active-color="#FE5E10"
					label-disabled="true" label-size="22">
					充值即视为同意 <text style="color:#FE5E10;">《充值服务协议》</text>
				</u-checkbox>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					checked: false
				}, {
					checked: false
				}, {
					checked: false
				}, {
					checked: false
				}],
				dealChecked: false
			}
		},
		onLoad() {

		},
		methods: {
			chooseBtn(index) {
				for (var i = 0; i < this.list.length; i++) {
					if (i == index) {
						this.list[i].checked = !this.list[i].checked
					} else {
						this.list[i].checked = false
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(@/batteryCharging/static/css/common.scss);

	.main {
		padding: 20rpx 20rpx;
		position: relative;
		z-index: 2;
		min-height: calc(100vh - env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;

		.top-card {
			position: relative;

			.pic {
				width: 100%;
				display: block;
			}

			.shade {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				padding: 50rpx 60rpx;

				.fz {
					font-size: 28rpx;
					color: #fff;
					margin-bottom: 10rpx;
				}

				.price {
					font-size: 52rpx;
					color: #fff;
					font-weight: bold;
					margin-bottom: 30rpx;
				}

				.lk {
					font-size: 24rpx;
					color: #fff;

					.ico {
						width: 26rpx;
						height: 26rpx;
						margin-right: 9rpx;
						display: inline-block;
						vertical-align: middle;
					}
				}
			}
		}

		.mod {
			background-color: #fff;
			padding: 30rpx 30rpx;
			margin: 0 20rpx 20rpx;
			border-radius: 20rpx;

			.t-tit {
				font-size: 26rpx;
				color: #262626;
				font-weight: 700;
				margin-bottom: 20rpx;
			}
		}



		.cz-sec {
			margin-top: -90rpx;
			position: relative;
			z-index: 2;

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 48%;
					margin: 0 0 4%;
					border-radius: 16rpx;
					overflow: hidden;
					background: #F7F7F7;
					border: 1.2px solid #F7F7F7;
					text-align: center;
					padding: 25rpx 0 25rpx;

					.fz {
						font-size: 32rpx;
						color: #FE5E10;
						font-weight: 700;
						line-height: 1;

						text {
							font-size: 48rpx;
							font-family: 'Arial';
						}
					}

					.wz {
						font-size: 26rpx;
						color: #999999;
						margin-top: 10rpx;
					}

					&.checked {
						background-color: #FFF7F2;
						border-color: #FE5E10;

						.fz,
						.wz {
							color: #FE5E10;
						}
					}
				}

			}

			.input {
				border-radius: 16rpx;
				background: #F7F7F7;
				padding: 0 40rpx;
				display: flex;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #262626;
					margin-right: 30rpx;
				}

				.ipt-txt {
					flex: 1;
					overflow: hidden;
					font-size: 26rpx;
					color: #333;
					height: 86rpx;
					line-height: 86rpx;
				}
			}

			.tip {
				font-size: 22rpx;
				color: #999999;
				margin-top: 20rpx;
			}
		}

		.rule-sec {
			.txt {
				.fz {
					font-size: 24rpx;
					color: #666666;
					line-height: 36rpx;
					display: flex;
					align-items: flex-start;
					margin-bottom: 15rpx;
				}

				.ico {
					width: 26rpx;
					height: 26rpx;
					margin: 3rpx 12rpx 0 0;
				}
			}
		}

		.submit {
			font-size: 28rpx;
			font-weight: 700;
			color: #fff;
			width: 100%;
			line-height: 100rpx;
			height: 100rpx;
			border-radius: 12rpx;
			background: linear-gradient(124.39deg, #FE5E10 0%, #FF8045 99.31%);
			margin: 50rpx auto 0;
		}

		.deal {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666;
			margin-top: 25rpx;
			padding: 0 20rpx;
		}
	}
</style>